import {
  FC,
  useState,
  useEffect,
  useMemo,
  useCallback,
  ChangeEvent,
} from "react";

import Child from "./Child";

interface listType {
  id: number;
  name: string;
  [propName: string]: any;
}

const App: FC = () => {
  // useState和ref一样，需要加泛型的
  const [count, setCount] = useState<number>(10);

  // useMemo也是通过泛型添加类型
  const doubleCount = useMemo<string>(() => {
    return count * 2 + "";
  }, [count]);

  const fn = useCallback((): void => {
    setCount((v) => v + 1);
  }, []);

  useEffect((): void => {
    // console.log(123);
    setList([
      {
        id: 1,
        name: "zhangsan",
      },
      {
        id: 2,
        name: "lisi",
      },
    ]);
  }, []);

  const [list, setList] = useState<listType[]>([]);

  const [value, setValue] = useState<string>("");
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return (
    <>
      <h2>react+ts</h2>
      <p>count: {count}</p>
      <p>doubleCount: {doubleCount}</p>
      <button onClick={fn}>+</button>

      <hr />

      <ul>
        {list.map((item: listType) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <hr />

      <input type="text" value={value} onChange={handleChange} />

      <hr />

      <Child count={count} name="wangwu" onAbc={fn} />
    </>
  );
};

export default App;
